<template>
  <div id="news">
    <!-- banner -->
    <div class="banner flex-row-c-c">
      <h1>新闻动态</h1>
    </div>
    <!-- 内容区 -->
    <section class="container">
      <!-- 左侧导航栏 -->
      <!-- <aside class="aside_bar">
        <ul class="flex-col-se">
          <li v-for="item in navList" :key="item.id" @click="onGoPath(item)">
            <a
              href="javascript: void(0)"
              :class="currNav == item.id ? 'curr_focus' : ''"
              >{{ item.title }}</a
            >
          </li>
        </ul>
      </aside> -->
      <!-- 新闻动态列表 -->
      <ul class="news_list">
        <li class="_item" v-for="item in newsArray" :key="item">
          <header class="">
            <div class="header_left flex-col-c-c">
              <img src="@/assets/images/little_panda.png" class="panda_logo" />
              <div class="triangle"></div>
            </div>
            <div>
              <h3>媒体报道</h3>
              <span>{{ item.time }}</span>
            </div>
          </header>
          <article class="flex-row-sb-c" @click.capture="viewDetail(item)">
            <div class="_info">
              <h3>{{ item.title }}</h3>
              <p>{{ item.desc }}</p>
            </div>
            <div class="news_map">
              <img :src="item.cover || '@/assets/images/Mask group.png'" />
            </div>
          </article>
        </li>
      </ul>
    </section>
    <!-- 底部pagination -->
    <!-- <div class="pagination_navigation ">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400">
            </el-pagination>
        </div> -->
  </div>
</template>

<script lang="ts">
import {newsCover1,newsCover2,newsCover3,newsCover4} from '@/const/image.ts'
import { link } from '~~/types'
import { ElPagination } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'

export default {
  transition:'test',
  components: {
    ElPagination,
  },
  setup() {
    const route = useRoute()
    const router = useRouter()
    let newsType = ref('熊猫公益')
    let currNav = ref(1)
    router.isReady().then(() => {
      currNav.value = Number(route.params.id)
    })
    const currentPage = ref(1)
    const navList = ref<link[]>([
      { id: 1, title: '全部', url: '' },
      { id: 2, title: '熊猫公益', url: '' },
      { id: 3, title: '媒体报道', url: '' },
      { id: 4, title: '公司活动', url: '' },
    ])
    const newsArray = ref([
      {
        title:
          '深度专访 | 2300w私域用户、复购率60%，成立仅3年的熊猫不走是怎么做到的？',
        desc: '做「生日派对」服务商，而不是"卖蛋糕的。"',
        time: '2021-10-29',
        cover: newsCover4,
        page: '4',
      },
      {
        title:
          '年营收超8亿，三年布局25城的熊猫不走蛋糕的超强商业本质洞察方法论',
        desc: '熊猫不走品牌短短三年成为烘培行业的翘楚！',
        time: '2021-10-15',
        cover: newsCover3,
        page: '2',
      },
      {
        title:
          '售卖的不仅仅是蛋糕，仪式感孕育出的大生意丨品牌仪式感专题',
        desc: '希望用户人生中每个最美好、最重要的时刻，都因为熊猫不走而变得更加...',
        time: '2021-10-08',
        cover: newsCover1,
        page: '3',
      },
      {
        title: '熊猫不走3年卖600万个蛋糕：一年营收8亿，私域占7成！',
        desc: '业绩月环比增长15%%-20%，每5个月翻一番。',
        time: '2021-06-29',
        cover: newsCover2,
        page: '1',
      },
    ])
    const onGoPath = (item) => {
      router.push({
        path: `/news/${item.id}`,
      })
    }
    const viewDetail = (item) => {
      router.push({
        path: `/news/detail/mediaReport/${item.page}`,
      })
      document.body.scrollTop = document.documentElement.scrollTop = 0
    }
    const changeType = (type, index) => {
      newsType.value = type
      currNav.value = index
      toTop()
      if (type == '全部') newsType.value = navList.value[1].title
    }
    const toTop = () => {
      var myTop = document.documentElement.scrollTop || document.body.scrollTop
      if (myTop < 600) return
      // 实现滚动效果
      const timeTop = setInterval(() => {
        document.body.scrollTop =
          document.documentElement.scrollTop =
          myTop -=
            70
        if (myTop <= 0) clearInterval(timeTop)
      }, 10)
    }

    return {
      navList,
      currNav,
      currentPage,
      newsType,
      newsArray,
      changeType, // 切换新闻类别
      toTop, // 切换新闻类别时，屏幕滚回到顶部
      onGoPath,
      viewDetail,
    }
  },
}
</script>
<style lang="scss" scoped>
#news {
  background-color: #fff;
  .banner {
    width: 100%;
    height: 306px;
    text-align: center;
    background: url('@/assets/images/navbar_bg.png') no-repeat;
    background-size: cover;

    h1 {
      font-family: 'PingFang SC';
      font-style: normal;
      font-weight: 600;
      font-size: 50px;
      color: white;
    }
  }
  .container {
    position: relative;
    top: 0;
    left: 0;
    min-width: 100%;
    padding: 100px;
    background: #fff;
    // 左侧导航栏
    .aside_bar {
      position: sticky !important;
      // position: fixed;
      top: 35% !important;
      width: 141px;
      height: 192px;
      // left: 209px;
      // left: 500px;
      ul {
        width: 100%;
        height: 100%;
        border: 1px solid #ffb5b5;
        padding-left: 16px;
        a {
          font-family: 'PingFang SC';
          font-style: normal;
          font-weight: 400;
          font-size: 14px;
          color: #602c17;
          margin-bottom: 20px;
        }
        .curr_focus {
          color: #ffb5b5;
        }
      }
    }
    // 新闻动态列表
    .news_list {
      margin: 0 auto;
      width: 1025px;
      padding: 0 0 105px;
      ._item {
        margin-bottom: 38px;
        header {
          display: flex;
          .header_left {
            margin-right: 22px;
            .panda_logo {
              width: 47px;
              height: 47px;
              border-radius: 50%;
              margin-bottom: 2px;
            }
            .triangle {
              width: 23px;
              height: 23px;
              border-left: 12px solid transparent;
              border-right: 12px solid transparent;
              border-bottom: 23px solid #f1f1f1;
            }
          }

          div {
            font-family: 'Microsoft YaHei';
            font-style: normal;
            font-weight: 400;
          }
          h3 {
            font-size: 20px;
          }
          span {
            font-size: 12px;
          }
        }

        article {
          width: 1025px;
          height: 308px;
          border: 15px #f1f1f1 solid;
          cursor: pointer;
          z-index: 99;
          ._info {
            flex: 1;
            font-family: 'Microsoft YaHei';
            padding: 0 56px 0 53px;
            h3 {
              font-size: 20px;
              margin-bottom: 15px;
            }
            p {
              display: inline-block;
              font-size: 14px;
              color: #4c4c4c;
              margin: 0 auto;
            }
          }
          .news_map {
            width: 595px !important;
            height: 100%;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
  .pagination_navigation {
    display: flex;
    justify-content: center;
    margin: 0 auto 64px;
  }
}
</style>
